import React from 'react'

class TODOList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            userName: '111'
        };
    }
    inputChange = (e) => {
        this.setState({
            userName: e.target.value 
        })
    }

    setUserName = (e) => {
        this.setState({
            userName: '李四'
        })
    }
    render() {
        return (
            <div> 
                <h2>双向绑定</h2>
                {/*model改变影响view view改变反过来影响model */}
                <input defaultValue={this.state.userName} value={this.state.userName} onChange={this.inputChange}/>
                <p>{this.state.userName}</p>
                <button onClick={this.setUserName}>改变userName的值</button>
            </div>
        );
    }
}

export default TODOList;